/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  color: #444;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
strong {
  font-weight: bold;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.small {
  font-size: 0.8em;
}
.margin-bottom {
  margin-bottom: 16px !important;
}

/*
 * Gridism
 * A simple, responsive, and handy CSS grid by @cobyism
 * https://github.com/cobyism/gridism
 */

/* Preserve some sanity */
.grid,
.unit {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Set up some rules to govern the grid */
.grid {
  display: block;
  clear: both;
}
.grid .unit {
  float: left;
  width: 100%;
  padding: 10px;
}

/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { padding-left: 20px; }
.grid .unit:last-child { padding-right: 20px; }

/* Nested grids already have padding though, so let’s nuke it */
.unit .unit:first-child { padding-left: 0; }
.unit .unit:last-child { padding-right: 0; }
.unit .grid:first-child > .unit { padding-top: 0; }
.unit .grid:last-child > .unit { padding-bottom: 0; }

/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters {
  padding: 0 !important;
}

/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
  max-width: 978px;
  margin: 0 auto;
}

/* Width classes also have shorthand versions numbered as fractions
 * For example: for a grid unit 1/3 (one third) of the parent width,
 * simply apply class="w-1-3" to the element. */
.grid .whole,          .grid .w-1-1 { width: 100%; }
.grid .half,           .grid .w-1-2 { width: 50%; }
.grid .one-third,      .grid .w-1-3 { width: 33.3332%; }
.grid .two-thirds,     .grid .w-2-3 { width: 66.6665%; }
.grid .one-quarter,
.grid .one-fourth,     .grid .w-1-4 { width: 25%; }
.grid .three-quarters,
.grid .three-fourths,  .grid .w-3-4 { width: 75%; }
.grid .one-fifth,      .grid .w-1-5 { width: 20%; }
.grid .two-fifths,     .grid .w-2-5 { width: 40%; }
.grid .three-fifths,   .grid .w-3-5 { width: 60%; }
.grid .four-fifths,    .grid .w-4-5 { width: 80%; }
.grid .golden-small,   .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
.grid .golden-large,   .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */

/* Clearfix after every .grid */
.grid {
  *zoom: 1;
}
.grid:before, .grid:after {
  display: table;
  content: "";
  line-height: 0;
}
.grid:after {
  clear: both;
}

/* Utility classes */
.align-center { text-align: center; }
.align-left   { text-align: left; }
.align-right  { text-align: right; }
.pull-left    { float: left; }
.pull-right, .pull-right-desktop   { float: right; }

/* A property for a better rendering of images in units: in
   this way bigger pictures are just resized if the unit
   becomes smaller */
.unit img {
  max-width: 100%;
}

/* Hide elements using this class by default */
.only-on-mobiles {
  display: none !important;
}

/* Responsive Stuff */
@media screen and (max-width: 640px) {
  /* Stack anything that isn’t full-width on smaller screens 
     and doesn't provide the no-stacking-on-mobiles class */
  .grid:not(.no-stacking-on-mobiles) > .unit {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .unit .grid .unit {
    padding-left: 0px;
    padding-right: 0px;
  }

  /* Sometimes, you just want to be different on small screens */
  .center-on-mobiles {
    text-align: center !important;
  }
  .hide-on-mobiles {
    display: none !important;
  }
  .only-on-mobiles {
    display: block !important;
  }
  .pull-right-desktop {
    float: none;
  }
}

/* Expand the wrap a bit further on larger screens */
@media screen and (min-width: 1180px) {
  .wider .grid,
  .grid.wider {
    max-width: 1180px;
    margin: 0 auto;
  }
}

.container {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.container:after, .clearfix:after {
  clear: both;
  content: '';
  display: block;
}

.no-style {
  background: none;
  border: 0;
}

@media screen and (max-width: 1086px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.button {
  background: transparent;
  border: 2px solid #BBB;
  color: #888;
  font-weight: bold;
  padding: 6px 24px;
  cursor: pointer;
  margin-bottom: 6px;
  display: inline-block;
  text-decoration: none;
  transition: all ease-in-out 120ms;
}
.button:hover {
  background-color: #BBB;
  color: #FFF;
}

.button.primary {
  border-color: #0067c6;
  color: #0067c6;
}
.button.primary:hover {
  background-color: #0067c6;
  color: #FFF;
}

.button.green {
  border-color: #00b0ab;
  color: #00b0ab;
}
.button.green:hover {
  background-color: #00b0ab;
  color: #FFF;
}

.button.yellow {
  border-color: #b5ba05;
  color: #b5ba05;
}
.button.yellow:hover {
  background-color: #b5ba05;
  color: #FFF;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5;
}

p {
  line-height: 1.4;
  margin-bottom: 0.5em;
}

h1 {
  color: #0067c6;
  font-size: 1.888em;
  font-weight: bold;
  padding: 0.8888em 0 0.5em;
}

h2 {
  font-size: 2.666em;
  line-height: 1.2;
  font-weight: bold;
  color: #666;
  padding: 0.5em 0 0.5em;
}

h2 > img {
  margin-right: 12px;
  float: left;
}

h3 {
  font-size: 1.666em;
  line-height: 1.2;
  padding: 0.5em 0 0.5em;
}

hr {
  border: 0;
  border-bottom: 1px solid #BBB;
  margin-bottom: 16px;
}

.muted {
  color: #666;
}
.small.muted {
  color: #888;
}

p.large-text {
  font-size: 1.15em;
  max-width: 580px;
}

.spacer {
  display: block;
  margin-top: 32px;
}

.header-bar {
  background-color: #0067c6;
  color: #FFF;
  vertical-align: top;
}

.social-icons a {
  display: inline-block;
  margin: 2px 3px 0 3px;
}

.header {
  border-bottom: 2px solid #0067c6;
}

.logo {
  padding: 8px 0 12px 0;
}

.main-menu a {
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
  padding: 58px 4px 12px 4px;
  margin: 0 12px;
  color: #666;
  text-decoration: none;
  border-bottom: 4px solid #FFF;
  transition: all ease-in-out 80ms;
}

.main-menu a:focus, .main-menu a:active {
  outline: none;
}

.main-menu a:hover {
  color: #529BDE;
  border-bottom: 4px solid #529BDE;
}

.main-menu a.selected {
  color: #0067c6;
  border-bottom: 4px solid #0067c6;
}

.menu-container button {
  margin-top: 22px;
  cursor: pointer;
}

@media screen and (max-width: 640px) {
  .main-menu {
    display: none;
    position: absolute;
    width: 240px;
    max-width: 280px;
    z-index: 100;
    top: 12px;
    right: 0;
    border-radius: 4px;
    background-color: #FFF;
    border: 2px solid #0067c6;
    box-shadow: 0 0 48px 0 rgba(0, 0, 0, 0.75);
  }
  .main-menu a {
    display: block;
    padding: 32px 16px;
  }
}

.fancy-checkbox input {
  display: none;
}
.fancy-checkbox label {
  display: inline-block;
  border: 1px solid #BBB;
  line-height: 1;
  width: 20px;
  height: 20px;
  cursor: pointer;
  overflow: hidden;
}
.fancy-checkbox input:checked + label > img {
  display: inline-block; 
}
.fancy-checkbox {
  display: inline-block;
  text-align: center;
}
.fancy-checkbox img {
  display: none;
  line-height: 1;
  width: 11px;
  height: 11px;
  margin-top: 3px;
}

.pop-under {
    margin: 16px 0;
    background-color: #0479C8;
    padding: 12px 16px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    display: none;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.4);
    left: 300px;
    position: relative;
    opacity: 0;                       
}

label {
  font-weight: bold;
  font-size: 12px;
  padding-bottom: 3px;
  display: block;
  color: #666;
}

input[type="text"], select {
  display: block;
  border: 1px solid #DDDDDD;
  padding: 4px;
  background-color: #ebebeb;
  color: #444;
  min-width: 200px;
  width: 320px;
  max-width: 100%;
}

.has-error label {
  color:  #E65151;
}
.has-error input[type="text"],.has-error  select {
  border: 1px solid  #E65151;
}

.form-group {
  margin-bottom: 6px;
}

.grid.full {
  margin-left: -20px;
  margin-right: -20px;
}

h1 span, span span {
  font-size: inherit;
}


.content a {
  text-decoration: underline;
  color: #0067c6;
  cursor: pointer;
}

*[data-fade-in] {
  opacity: 0;
}

html {
  height: 100%;
}
html, body {
  min-height: 100%;
}

body {
  padding-bottom: 42px;
  position: relative;
  overflow-x: hidden;
}

#footer {
  background-color: #EEE;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 34px;
  color: #666;
  padding: 8px 0;
  font-size: 12px;
}

#footer a, #footer span {
  color: #0067c6;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
}

#footer .half {
  padding: 4px 0 !important;
  font-size: 12px;
}

#footer .sep {
  color: #AAA;
}

/* Responsive Stuff */
@media screen and (max-width: 640px) {
  #footer {
    background-color: #EEE;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 60px;
    color: #666;
    padding: 8px 0;
  }

  h1.pull-right-desktop {
    padding-top: 0px !important;
  }
}

#language-select-container {
  position: relative;
}

#language-select-container img, #language-select-container select {
  display: inline-block;
}

#language-select-container select {
  background-color: #0067c6;
  color: #FFF;
  padding-left: 28px;
  border-radius: 0px;
  min-width: 160px;
}

#language-select-container img {
  position: absolute;
  left: 8px;
  top: 4px;
  pointer-events: none;
  width: 16px;
}

.mfp-content h2 {
  line-height: 1.2;
}

h2 > img {
  margin-right: 12px;
  margin-bottom: 12px;
  margin-top: -12px;
}

.header-bar select {
  width: 160px;
}

@media screen and (max-width: 480px) {
  .header-bar .icons {
    clear: right;
    display: block !important;
    float: right;
    margin: 6px 0;
  }
  .header-bar .pull-right {
    float: none;
    text-align: center;
    clear: both;
  }
  .header-bar #language-select-container select {
    min-width: 120px;
    width: 140px;
    font-size: 12px;
    margin-top: 4px;
  }
  #language-select-container img {
    top: 7px;
  }
}